<template>
  <div class="page">
    <div class="print-page" id="printPage" ref="print">
      <h1 class="h1-page">付款申请</h1>
      <span class="span-page" style="font-size: 12px">
        九方通逊 &nbsp;&nbsp;&nbsp; 申请日期：{{ printDataObj.applyDate }}
      </span>

      <table border="1" cellspacing="0" class="table-page">
        <tr>
          <td>申请编码</td>
          <td colspan="5">
            <p class="td-html">
              {{ printDataObj.applyNos }}
            </p>
          </td>
        </tr>
        <tr>
          <td>申请人</td>
          <td colspan="5">
            <p class="td-html">
              {{ printDataObj.applyUserName }}
            </p>
          </td>
        </tr>
        <tr>
          <td>申请人部门</td>
          <td colspan="5">
            <p class="td-html">
              {{ printDataObj.applyDeptName }}
            </p>
          </td>
        </tr>

        <template v-for="payApplyInfo in printDataObj.payApplyInfoList">
          <tr >
            <td colspan="6" class="text-left padding-left">{{payApplyInfo.applyNo}}</td>
          </tr>
          <tr>
            <td>付款事由</td>
            <td colspan="2">
              <p class="td-html">
                {{payApplyInfo.applyRemark}}
              </p>
            </td>
            <td>收款账户</td>
            <td colspan="2">
              <p class="td-html">
                {{payApplyInfo.serveCompanyAccountName}}
              </p>
            </td>
          </tr>
          <tr >
            <td>付款金额</td>
            <td colspan="2">
              <p class="td-html">{{payApplyInfo.payAmt}} <span>{{payApplyInfo.currency}}</span></p>
            </td>
            <td>支付日期</td>
            <td colspan="2">
              <p class="td-html">
                {{payApplyInfo.payDate}}
              </p>
            </td>
          </tr>
          <tr >
            <td>费用中心</td>
            <td colspan="2">
              <p class="td-html">
                {{payApplyInfo.feeBelongDeptName}}
              </p>
            </td>
            <td>支付方式</td>
            <td colspan="2">
              <p class="td-html">
                {{payApplyInfo.payType}}
              </p>
            </td>
          </tr>
          <tr >
            <td>附件</td>
            <td colspan="5">
              <p class="td-html" v-for="fileName in payApplyInfo.fileNames" :key="fileName">
                <span>{{fileName}}</span>
              </p>
            </td>
          </tr>
          <tr >
            <td>审批流程</td>
            <td colspan="5">
              <div class="td-html process-item" v-for="approveInfo in payApplyInfo.approveInfoList">
                <span class="flex-treble">{{approveInfo.approverName}} {{approveInfo.approveStatusName}}</span>
                <span class="flex-sub">{{approveInfo.approveTime}}</span>
              </div>
            </td>
          </tr>
        </template>

        <tr>
          <td colspan="6" class="text-left padding-left">
            总付款金额 {{ printDataObj.totalPayAmtStr }}
          </td>
        </tr>
      </table>

      <p
        class="text-left margin-top-sm flex justify-around"
        style="margin-left:5mm"
      >
        <span>打印时间：{{ printDataObj.printTime }}</span>
        <span>打印人：{{ printDataObj.printUserName }}</span>
      </p>
    </div>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";

export default {
  data() {
    return {
      year: "2021",
      month: "11",
      day: "16",
      printDataObj: null
    };
  },

  methods: {

    async getPrintData() {
      let payApplyIds = this.$route.query.payApplyIds;
      const { code, data, message } = await ajax("getPrintData", {
        arg: payApplyIds
      });
      if (code !== 200) {
        if (message) {
          this.$message.error(message);
        } else {
          this.$message.error("服务器异常");
        }
        return;
      }
      this.printDataObj = data;
      debugger
    },
  },

  mounted() {
    this.getPrintData();
  }
};
</script>

<style>
/* 去除页眉页脚 */
@page {
  size: auto A4 landscape;
  /* margin: 20px auto; */
}
@media print {
  table,
  table tr th,
  table tr td {
    border: 1px solid;
  }
  table {
    line-height: 25px;
    text-align: center;
    border-collapse: collapse;
    font-size: 12px;
  }
  .print-page {
    /* width: 210mm; */
    /* min-height: 297mm; */
    margin: 0 auto;
    text-align: center;
    padding-bottom: 14mm;

    border-bottom: 0;
    background: #fff;
  }
  .h1-page {
    position: relative;

    font-size: 18px;
    margin: 0 auto;
    text-align: center;
    top: 10mm;
  }
  .span-page {
    float: left;
    margin-left: 5mm;
    margin-top: 12mm;
  }

  .table-page {
    width: 180mm;
    margin: 0 auto;
    margin-top: 20mm;
    table-layout: fixed;
  }
  .td-html {
    padding: 0 4px;
    text-align: left;
  }

  .process-item {
    border-bottom: 1px solid;
    display: flex;
  }

  .process-item:last-child {
    border-bottom: 0;
  }
}
</style>
<style lang="scss" scoped>
.page {
  // height: 100%;
  padding: 20px 0;

  .print-btn {
    position: fixed;
    right: 60px;
    top: 100px;
  }
  .print-page {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto 0;
    text-align: center;
    padding-bottom: 14mm;
    // border: 1px solid #bbb;
    border-bottom: 0;
    background: #fff;

    table,
    table tr th,
    table tr td {
      border: 1px solid;
    }
    table {
      line-height: 25px;
      text-align: center;
      border-collapse: collapse;
    }

    .h1-page {
      position: relative;
      // font-weight: 400;
      font-size: 18px;
      margin: 0 auto;
      text-align: center;
      top: 20mm;
    }
    .span-page {
      float: left;
      margin-left: 15mm;
      margin-top: 24mm;
    }

    .table-page {
      width: 180mm;
      margin: 0 auto;
      margin-top: 31mm;
      table-layout: fixed;

      .td-html {
        padding: 0 4px;
        text-align: left;
        // text-indent: 2em;
      }

      .process-item {
        border-bottom: 1px solid;
        display: flex;
        &:last-child {
          border-bottom: 0;
        }
      }
    }
  }
}
</style>
